<template>
  <div id="cardDetail">
    <div v-loading="loadingDetail">
      <div class="top">
        <el-button v-if="detail.status == Enum.StatusActive" type="danger" @click="changeStatus(Enum.StatusDisable, '停用')">停用</el-button>
        <el-button v-else type="success" @click="changeStatus(Enum.StatusActive, '激活')">激活</el-button>

        <el-button class="button" @click="syncDetail">同步信息</el-button>
        <el-button class="button" @click="speedLimitOpen" v-if="speed_limit_box.action">限速</el-button>
      </div>

      <el-descriptions :column="2" :colon="false" label-class-name="dialogLabel" class="contentBox">
        <el-descriptions-item label="iccid" content-class-name="content">
          <p>
            {{ detail.iccid }}
            <el-popover trigger="hover" @show="createQRcode" @hide="deteleQRcode">
              <i slot="reference" class="iconfont icon-erweima"></i>
              <div class="QRcode" ref="QRCode"><!--二维码容器,在这个div里面生成二维码--></div>
            </el-popover>
          </p>
        </el-descriptions-item>

        <el-descriptions-item label="状态">
          <div v-html="$api.status.cardStatus(detail.status, detail.status_name)"></div>
          <el-link type="info" disabled style="margin-left: 10px"> {{ detail.status_update_dt }} / {{detail.status_change_remark}}</el-link>
        </el-descriptions-item>

        <el-descriptions-item v-for="(item, index) in tableItem" :key="index" :label="item.label">{{ detail[item.prop]}} <el-link type="info" disabled style="margin-left: 10px">{{item.remark_field ? detail[item.remark_field] : ''}}</el-link></el-descriptions-item>
      </el-descriptions>

      <div class="bottom">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="套餐用量" name="comboUse">
            <el-row>
              <el-col :span="6"><span v-if="comboUseData.cycle_mode != 3">{{comboUseData.cycle}}</span><span v-if="comboUseData.cycle_mode == 3">{{comboUseData.run_dt.split(' ')[0]}} ~ {{comboUseData.expire_dt.split(' ')[0]}}</span></el-col>
              <el-col :span="6">套餐总</el-col>
              <el-col :span="6">使用</el-col>
              <el-col :span="6">同步时间</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">语音</el-col>
              <el-col :span="6">{{comboUseData.combo_total_voice}} <span style="color: #C0C4CC">[{{comboUseData.voice_ratio}}]</span></el-col>
              <el-col :span="6">{{comboUseData.used_total_voice}} <span style="color: #f56c6c">{{comboUseData.excess_voice ? '超量'+comboUseData.excess_voice : ''}}</span></el-col>
              <el-col :span="6">{{comboUseData.last_updated_voice_dt}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">流量</el-col>
              <el-col :span="6">{{comboUseData.combo_total_flow}} <span style="color: #C0C4CC">[{{comboUseData.flow_ratio}}]</span></el-col>
              <el-col :span="6">{{comboUseData.used_total_flow}} <span style="color: #f56c6c">{{comboUseData.excess_flow ? '超量'+comboUseData.excess_flow : ''}}</span></el-col>
              <el-col :span="6">{{comboUseData.last_updated_flow_dt}}</el-col>
            </el-row>
            <el-row>
              套餐组成
            </el-row>
            <el-alert v-for="item in comboList" :title="item.title +'       '+ item.package_type_name+'   流量:'+item.flow+'  语音:'+item.voice" type="info" :closable="false"></el-alert>
            <br>
            <el-row>剩余套餐 {{combo_surplus.month_number}}</el-row>
            <el-alert v-for="item in combo_surplus.combo_list" :title="item.title +'      '+ item.package_type_name+'   流量:'+item.flow+'  语音:'+item.voice+'  月份:'+item.cycle_number" type="info" :closable="false" v-if="item.cycle_number" style="margin-bottom: 6px"></el-alert>
          </el-tab-pane>

          <el-tab-pane label="白名单" name="linkman">
            <div class="linkForm" v-loading="loadingTab.linkman">
              <div class="buttonBox">
                <el-button type="primary" v-if="disabled" @click="disabled = false">编辑</el-button>
                <div v-else>
                  <el-button type="success" @click="submitLinkMan">保存</el-button>
                  <el-button @click="addLinkMan">添加号码</el-button>
                  <el-button type="info" @click="cancelVoiceWhitelist">取消</el-button>
                </div>
              </div>
              <div v-if="linkManList.length == 0">
                <myEmpty> </myEmpty>
              </div>
              <el-table :data="linkManList">
                <el-table-column label="电话">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.to_msisdn" :disabled="disabled"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="姓名">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" :disabled="disabled"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="描述">
                  <template slot-scope="scope">
                    <span :style="scope.row.status==1? 'color: #909399;' : scope.row.status==2? 'color:#67c23a;' : 'color: #e6a23c;'">{{scope.row.remark}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button type="danger" v-if="!disabled" @click="clearLinkMan(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="充值记录" name="orderList">
            <div v-loading="loadingTab.orderList">
              <el-table :data="order_list.list" width="100%">
                <el-table-column prop="order_sn" label="订单号" width="200">
                  <template slot-scope="{row}">
                    <router-link target="_blank" :to="{path:'/orderDetail', query:{data_id: row.id}}" :underline="false" class="tableFont">{{row.order_sn}}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="combo.combo_type_name" label="套餐类型"></el-table-column>
                <el-table-column prop="combo.name" width="150" label="套餐"></el-table-column>
                <el-table-column prop="pay_amount" label="支付金额"></el-table-column>
                <el-table-column prop="status_name" label="状态"></el-table-column>
                <el-table-column prop="create_dt" width="150" label="订单时间"></el-table-column>
                <template slot="empty">
                  <myEmpty></myEmpty>
                </template>
              </el-table>
              <el-pagination
                  @size-change="orderList(null, $event)"
                  @current-change="orderList($event, null)"
                  :background="true"
                  layout="total, prev, pager, next, sizes, jumper"
                  :current-page="order_list.request.page"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="order_list.request.size"
                  :total="order_list.page.total"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="变更历史" name="changeHistory">
            <div class="queryNumberChange">
              <el-form>
                <el-form-item label="年份">
                  <el-date-picker v-model="year" type="year" placeholder="选择年份" :clearable="false"
                                  @change="changeHistoryButton"></el-date-picker>
                </el-form-item>

                <el-form-item>
                  <el-button @click="changeHistoryButton">查询历史</el-button>
                </el-form-item>
              </el-form>
            </div>

            <el-table :data="ChangeHistoryList" v-loading="loadingTab.changeHistory">
              <el-table-column prop="field_desc" label="字段"></el-table-column>

              <el-table-column prop="old_val_desc" label="变更前值"></el-table-column>

              <el-table-column prop="new_val_desc" label="变更后值"></el-table-column>

              <el-table-column prop="create_date" label="操作日期"></el-table-column>

              <el-table-column prop="user_desc" label="操作用户"></el-table-column>

              <template slot="empty">
                <myEmpty></myEmpty>
              </template>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="历史用量" name="comboUseHistory"  v-if="false">
<!--            完善中，先不显示-->
            <div class="queryNumberChange">
              <el-form>
                <el-form-item label="年份">
                  <el-date-picker v-model="year" type="year" placeholder="选择年份" :clearable="false" @change="changeHistoryButton"></el-date-picker>
                </el-form-item>

                <el-form-item>
                  <el-button @click="changeHistoryButton">查询历史</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-row>
              <el-row>
                <el-col :span="6">{{comboUseData.cycle}}</el-col>
                <el-col :span="6">套餐总</el-col>
                <el-col :span="6">使用</el-col>
                <el-col :span="6">同步时间</el-col>
              </el-row>
              <el-row>
                <el-col :span="6">语音</el-col>
                <el-col :span="6">{{comboUseData.combo_total_voice}} <span style="color: #C0C4CC">[{{comboUseData.voice_ratio}}]</span></el-col>
                <el-col :span="6">{{comboUseData.used_total_voice}} <span style="color: #f56c6c">{{comboUseData.excess_voice ? '超量'+comboUseData.excess_voice : ''}}</span></el-col>
                <el-col :span="6">{{comboUseData.last_updated_voice_dt}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="6">流量</el-col>
                <el-col :span="6">{{comboUseData.combo_total_flow}} <span style="color: #C0C4CC">[{{comboUseData.flow_ratio}}]</span></el-col>
                <el-col :span="6">{{comboUseData.used_total_flow}} <span style="color: #f56c6c">{{comboUseData.excess_flow ? '超量'+comboUseData.excess_flow : ''}}</span></el-col>
                <el-col :span="6">{{comboUseData.last_updated_flow_dt}}</el-col>
              </el-row>
              <el-row>
                套餐组成
              </el-row>
              <el-alert v-for="item in comboList" :title="item.title +'       '+ item.package_type_name+'   流量:'+item.flow+'  语音:'+item.voice" type="info" :closable="false"></el-alert>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--限速弹窗-->
    <el-dialog title="限速设置" :visible.sync="speed_limit_box.show" width="260px" append-to-body>
      <el-select v-model="speed_limit_box.form.speed" placeholder="请选择速率">
        <el-option v-for="item in speed_limit_box.limit" :label="item.name" :value="item.name"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="speed_limit_box.show = false">取 消</el-button>
        <el-button type="primary" @click="speedLimitSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import qs from "qs"
import QRCode from 'qrcodejs2'
export default {
  name: "IotCardDetail",
  props:{
    request:{
      id:Number,
      operator_key: Number,
      iccid: String,
    }
  },
  data() {
    return {
      detail: {},
      changeStatusForm: {},
      option: [],
      activeName: "comboUse",
      ChangeHistoryList: [],
      changeHistoryqueryInfo: {},
      order_list: {
        list:[],
        page:{
          total: 0,
        },
        request:{
          size: 10,
          page: 1,
          // 同参数传递多个值
          status: [this.$api.Enum.StatusActive, this.$api.Enum.StatusDisable]
        },
        loading:false,
      },

      year: '',
      linkManList: [], // 编辑后的语音白名单
      voiceWhitelist: [],// 语音白名单
      disabled: true,
      QRcode: '',
      tableItem: [
        { label: '电话号码', prop: 'msisdn' },
        { label: '识别码', prop: 'imsi' },
        { label: '手机串号', prop: 'imei' },
        { label: '网络制式', prop: 'net_service_name' },
        { label: '类型', prop: 'type_name' },
        { label: '实名状态', prop: 'is_verified_name' },
        { label: '速率', prop: 'speed' },
        { label: '渠道', prop: 'channel_name' },
        { label: '应用商', prop: 'agent_app_name', remark_field: 'agent_app_assign_dt'},
        { label: '代理商', prop: 'agent_agency_name', remark_field: 'agent_agency_assign_dt'},
        { label: '零售商', prop: 'agent_retailer_name', remark_field: 'agent_retailer_assign_dt'},
        { label: '所属套餐组', prop: 'group_name' },
        { label: '应用', prop: 'app_name'},
        // { label: '余额', prop: 'balance'},
        { label: '获取时间', prop: 'get_dt' },
        { label: '创建时间', prop: 'create_dt' },
        { label: '首次激活时间', prop: 'first_active_dt' },
        { label: '更新时间', prop: 'update_dt' },
        { label: '自定义', prop: 'custom' },
      ],
      orderDetail: {
        combo: {}
      },
      tableGroup: [
        { label: '代理商名称', prop: 'agent_agency_name' },
        { label: '代理商成本费用', prop: 'agent_agency_cost_price' },
        { label: '代理商毛利润', prop: 'agent_agency_gross_profit' },
        { label: '代理商净利润', prop: 'agent_agency_net_profit' },
        { label: '代理商利润比例', prop: 'agent_agency_profits_scale' },
        { label: '应用商名称', prop: 'agent_app_name' },
        { label: '应用商成本费用', prop: 'agent_app_cost_price' },
        { label: '应用商毛利润', prop: 'agent_app_gross_profit' },
        { label: '应用商净利润', prop: 'agent_app_net_profit' },
        { label: '应用商利润比例', prop: 'agent_app_profits_scale' },
        { label: '零售商名称', prop: 'agent_retailer_name' },
        { label: '零售商成本费用', prop: 'agent_retailer_cost_price' },
        { label: '零售商毛利润', prop: 'agent_retailer_gross_profit' },
        { label: '零售商利润比例', prop: 'agent_retailer_profits_scale' },
      ],
      tableCombo: [
        { label: '套餐名', prop: 'name' },
        { label: '套餐类型', prop: 'combo_type_name' },
        { label: '包类型', prop: 'package_type_name' },
        { label: '生效月', prop: 'effect_month' },
        { label: '流量', prop: 'flow' },
        { label: '语音', prop: 'voice' },
        { label: '短信', prop: 'sms' },
      ],
      refundTabel: [
        { label: '接受用户', prop: 'accept_user_name' },
        { label: '订单号', prop: 'refund_sn' },
        { label: '退款金额', prop: 'pay_amount' },
        { label: '退款比例', prop: 'refund_ratio_name' },
        { label: '退款备注', prop: 'remark' },
        { label: '退款状态', prop: 'status_name' },
        { label: '创建时间', prop: 'create_dt' },
        { label: '执行时间', prop: 'exec_dt' },
      ],
      refundData: {},
      loadingDetail: false,
      loadingTab: {
        comboUse: false,
        linkman: false,
        orderList: false,
        changeHistory: false
      },
      comboUseData: {
        combo_total_flow: 0,
        combo_total_sms: 0,
        combo_total_voice: 0,
        cycle: "",
        last_updated_flow_dt: "",
        last_updated_sms_dt: "",
        last_updated_voice_dt: "",
        used_total_flow: 0,
        used_total_sms: 0,
        used_total_voice: 0,
      },
      comboList:[],
      comboUsrColor: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e5cb4d', percentage: 40 },
        { color: '#4bff00', percentage: 100 }
      ],
      comboUseQueryInfo: {},
      combo_surplus:{
        month_number:0,
        combo_list:[],
      },
      speed_limit_box:{
        action: false, // 功能是否有效
        show:false, // 弹窗显示
        form: {
          speed: '',
        },
        limit: [], // 支持的速率
      },
      app_detail:null,
    };
  },
  // watch:{
  //   data_id:{
  //     immediate: true, // 解决首次负值不触发的情况
  //     handler: function (newVal,oldVal){
  //       if (newVal){
  //
  //       }
  //     },
  //   }
  // },

  mounted() {
    this.year = new Date
    this.$api.foundation.dicListExtendCache([
      this.$api.Enum.DicTypeCardStatus,
      this.$api.Enum.DicTypeOrderStatus,
      this.$api.Enum.DicTypeOperator,
      this.$api.Enum.DicTypeResellerList,
      this.$api.Enum.DicTypeChannelDrive,
    ], '', res => {
      this.option = res
      this.getCardDetail()
    })
    this.$api.power([], this.tableItem, res => {
      this.tableItem = res.tableItem
    })
    this.$api.power([], this.tableGroup, res => {
      this.tableGroup = res.tableItem
    })
    this.comboUse()
  },
  methods: {
    getCardDetail() {
      this.loadingDetail = true
      this.$api.card.cardDetail(this.request, res => {
        if (!res.status) {
          this.$message.error(res.status)
          return
        }
        this.detail = res.data
        this.loadingDetail = false
        this.speedLimitCheck()
      })
    },
    changeStatusButton() {
      this.changeStatusForm.iccid = this.queryDetal.iccid;
      this.changeStatusForm.operator_key = this.queryDetal.operator_key;
      this.changeStatusForm.status = this.detailData.status;
    },
    submitChangeStatus() {
      this.changeStatusForm.operator_key = this.request.operator_key
      this.changeStatusForm.iccid = this.request.iccid
      this.$api.card.changeStatus(this.changeStatusForm, res => {
        if (!res.status) {
          this.$message.error(res.message);
          return
        }
        this.$message.success("变更成功!");
        this.getCardDetail()
      });
    },
    syncDetail() {
      console.log(this.request, this.detail)
      this.$api.card.syncDetail({ channel_id: this.detail.channel_id, remark:'手动同步', card_query: "id="+this.detail.id}, res => {
        if (!res.status) {
          return this.$message.error(res.message)
        }
        this.$message.success('同步成功')
        this.getCardDetail()
      })
    },
    // 限速
    speedLimitCheck(){
      const limit = this.option[this.$api.Enum.DicTypeChannelDrive].filter((item)=> {
        return item.key === this.detail.driver
      })
      if (limit.length != 1){
        return
      }
      this.speed_limit_box.action = limit[0].extend.speed_limit ? true : false
      this.speed_limit_box.limit = limit[0].extend.speed_limit
    },
    speedLimitOpen(){
      /*
      获取通道信息，支持限速就展示这个按钮。
      那就需要查询通道了，通过驱动来确定了。
        目前来看，驱动标志最好写在卡上，因为很多功能需要通过驱动来确认.
          目前通过运营商来确认，可能存在精度不足的；
          虽然也可以通过channel_id 间接确认，但又存在权限问题，最终导致异常。
       */
      this.speed_limit_box.show = true
      this.speed_limit_box.form.speed = this.detail.speed ?? ''

      /* 存在的问题是，选中值没有显示出来，数据是正确被选中了
      const h = this.$createElement;
      let select = h('el-select', {
        attrs: {
          // 'value-key':'name',
          // 'value': this.speed_limit.attrs
        },
        props:{
          'value-key':'name',
          'value': this.speed_limit.attrs,
        },
        on:{
          input:(event)=>{
            if (!event){
              event = {name:''}
            }
            this.speed_limit.attrs = event
            console.log('input',event, this.speed_limit.attrs)
            this.$set(this.speed_limit.attrs, 'name', event.name)
          },
          // change:(event)=>{
          //   this.speed_limit.attrs = event
          //   console.log('change',event, this.speed_limit.attrs)
          // }
        },
      }, driver.extend.speed_limit.map((item)=>h('el-option', {attrs:{value: item, label:item.name}})))
      */
      /* 存在的问题是，取消时无法清除旧值
      let options = [{name:''}]
      options.push(...driver.extend.speed_limit)
      let selectV2 = h('select',{
        attrs: {
          placeholder: "请选择速率",
          // 'value-key':'name',
          'value': this.speed_limit.attrs.name
        },
        props:{
          value: this.speed_limit.attrs.name,
        },
        on:{
          input:(event)=>{
            this.speed_limit.attrs.name = event.target.value
            console.log('input',event, this.speed_limit.attrs)
          },
          // change:(event)=>{
          //   this.speed_limit.attrs = event
          //   console.log('change',event, this.speed_limit.attrs)
          // }
        },
      }, options.map((item)=>h('option', {attrs:{value: item.name, label:item.name}})))
       */


      // this.$msgbox({
      //   title: '流量限速',
      //   message: selectV2,
      //   showCancelButton: true,
      //   // beforeClose:function (action, instance, done){
      //   //   console.log('限速取消',action, instance, done)
      //   //   // window.removeChild(instance)
      //   // },
      // }).then(action=>{
      //   console.log('限速确定',action, this.speed_limit.attrs)
      // }).catch(function (e){
      //   // this.speed_limit.attrs.name = this.detail.speed ?? ''
      //   // console.log('限速取消', this.speed_limit.attrs, this.detail)
      //   // removeNode.parentNode.removeChild(selectV2)
      //   console.log('限速取消',this)
      // })
    },
    speedLimitSubmit(){
      if (this.speed_limit_box.form.speed === ''){
        return this.$message.warning('请选择速率')
      }
      this.$api.card.speedLimit({
        id:this.detail.id,
        iccid:this.detail.iccid,
        operator_key: this.request.operator_key,
        speed: this.speed_limit_box.form.speed
      }, res=>{
        if (!res.status) {
          return this.$message.error(res.message)
        }
        this.speed_limit_box.show = false
        this.$message.success('操作成功')
        this.getCardDetail()
      })
    },

    handleClick(tabPage) {
      if (this.activeName == "changeHistory") {
        this.changeHistoryButton()
      } else if (this.activeName == "orderList") {
        this.orderList()
      } else if (this.activeName == "linkman") {
        this.getLinkMan()
      } else if (this.activeName == 'comboUse') {
        this.comboUse()
      }
    },
    changeHistoryButton() {
      this.loadingTab.changeHistory = true
      this.changeHistoryqueryInfo.year = (this.year).getFullYear()
      this.changeHistoryqueryInfo.iccid = this.detail.iccid
      this.changeHistoryqueryInfo.operator_key = this.request.operator_key
      this.$api.card.numberChange(this.changeHistoryqueryInfo, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.ChangeHistoryList = res.data.list
        this.loadingTab.changeHistory = false
      });
    },
    /**
     * 订单列表查询
     * @param page 如果空取默认值
     * @param size 如果空取默认值
     */
    orderList(page, size) {
      // this.loadingTab.orderList = true
      this.order_list.loading = true
      this.order_list.request.iccid = this.detail.iccid
      page = Number(page)
      size = Number(size)
      if (page > 0) this.order_list.request.page = page;
      if (size > 0) this.order_list.request.size = size;

      this.$api.order.orderList(this.order_list.request, res => {
        this.order_list.loading = false
        if (!res.status) {
          return this.$message.error(res.message)
        }
        // this.topupLogList = res.data.list
        this.order_list.list = res.data.list
        this.order_list.page = res.data.page
      })
    },

    // 获取语音白名单
    getLinkMan() {
      this.loadingTab.linkman = true
      this.voiceWhitelist = []
      this.$api.card.cardWhiteList({operator_key: this.request.operator_key, card_id: this.detail.id}, res => {
        if (!res.status) {
          this.$message.error(res.message)
          return
        }
        res.data.list.forEach(element => {
          element.disable = true
          this.voiceWhitelist.push(element)
        })
        this.linkManList = JSON.parse(JSON.stringify(this.voiceWhitelist))
        this.loadingTab.linkman = false
      })
    },
    submitLinkMan() {
      let list = []
      this.linkManList.forEach(element => {
        if (element.to_msisdn) {
          list.push(element)
        }
      })
      this.$api.card.cardWhiteListSet({
        operator_key: this.request.operator_key,
        card_id: this.detail.id,
        list: list
      }, res => {
        if (!res.status) {
          this.$message.error(res.message)
          return
        }
        this.$message.success('修改成功!')
        this.getLinkMan()
        this.disabled = true
      })
    },
    // 移除语音白名单
    clearLinkMan(index) {
      if (this.linkManList.length <= 1) {
        this.$message.error('至少需要保留一个号码!')
      } else {
        if (this.linkManList[index].disable) {
          this.$confirm('确定删除此号码?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.linkManList.splice(index, 1)
          })
        } else {
          this.linkManList.splice(index, 1)
        }
      }
    },
    addLinkMan() {
      if (this.linkManList.length < 10) {
        this.linkManList.push({})
      } else {
        this.$message.error('已到十个号码上限!')
      }
    },
    // 取消语音白名单
    cancelVoiceWhitelist(){
      this.linkManList = JSON.parse(JSON.stringify(this.voiceWhitelist))
      this.disabled = true
    },

    createQRcode() {
      let txt = this.detail.iccid
      if (this.detail.app_id > 0){ // 获取完整访问地址
        if (this.app_detail === null){
          this.$api.merchant.appDetailPublic({id: this.detail.app_id}, res => {
            if (!res.status) {
              return this.$message.error(res.message)
            }
            this.app_detail = res.data??{}
          },{async:false})
        }
        this.app_detail.wx_cli_url.forEach((item)=>{
          if (this.request.operator_key === item.operator_key){
            txt = item.url+'?s='+txt
          }
        })
      }
      new QRCode(this.$refs.QRCode, {
        width: 150,
        height: 150
      }).makeCode(`${txt}`);
    },

    deteleQRcode() {
      this.$refs.QRCode.innerHTML = ''
    },
    changeStatus(status, text) {
      this.$prompt('状态变更备注', `${text}卡片`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /^.+$/,
        // inputErrorMessage: '备注必填',
        inputPlaceholder: '手动操作',
      }).then(({ value }) => {
        if (value == "" || value == null || value == undefined){
          value = '手动操作'
        }
        this.changeStatusForm.status = status
        this.changeStatusForm.status_change_remark = value
        this.submitChangeStatus()
      })
    },
    comboUse() {
      this.loadingTab.comboUse = true
      this.$api.combo.getUse({card_id:this.request.id, operator_key:this.request.operator_key}, res => {
        this.comboUseData = res.data.dosage
        this.comboUseData.flow_usr_proportion = this.comboUseData.combo_total_flow ? Math.floor((this.comboUseData.combo_total_flow - this.comboUseData.used_total_flow) / this.comboUseData.combo_total_flow * 100) : 0
        this.comboUseData.voice_usr_proportion = this.comboUseData.combo_total_voice ? Math.floor((this.comboUseData.combo_total_voice - this.comboUseData.used_total_voice) / this.comboUseData.combo_total_voice * 100) : 0
        this.comboUseData.excess_flow = res.data.dosage.used_total_flow > res.data.dosage.combo_total_flow ? res.data.dosage.used_total_flow - res.data.dosage.combo_total_flow : '';
        this.comboUseData.excess_voice = res.data.dosage.used_total_voice > res.data.dosage.combo_total_voice ? res.data.dosage.used_total_voice > res.data.dosage.combo_total_voice : '';
        this.comboList = res.data.combo_list;
        this.loadingTab.comboUse = false
      })
      this.comboSurplus()
    },
    comboSurplus(){
      this.$api.combo.getSurplus({card_id:this.request.id, operator_key:this.request.operator_key}, res=>{
          if (!res.status){
            return this.$message.error(res.message)
          }
          this.combo_surplus = res.data
      })
    },
    getProportion(percentage) {
      return '剩余' + percentage + '%'
    }
  },
};
</script>

<style lang="less" >
#cardDetail {

  .content {
    position: relative;
  }

  .drawerWidth {
    min-width: 800px;
  }
}
</style>

<style lang="less" scoped>
.top {
  padding: 0 20px;
  display: flex;
  margin-bottom: 15px;

  .button {
    margin-left: 15px;
  }
}

.QRcode {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentBox {
  padding: 20px;

  .icon-erweima {
    display: inline-block;
    font-size: 24px;
    position: absolute;
    line-height: 14px;
    height: 14px;
  }
}

.bottom {
  padding: 0 20px;

  .el-tab-pane {
    .comboUse {
      display: flex;
      justify-content: space-around;

      div {
        margin: 10px 20px;
      }

      .comboUseText {
        text-align: center;
      }
    }

    .el-table {
      width: 100%;

      .tableFont {
        color: #606266;

        :hover {
          color: #409eff;
        }
      }
    }

  }

  .queryNumberChange {
    .el-form {
      display: flex;
      align-items: flex-end;

      .el-form-item {
        margin-right: 15px;
      }
    }
  }

  .linkForm {
    padding: 20px;

    .buttonBox {
      margin-bottom: 10px;
    }

    .el-form {
      width: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;

      .number {
        width: 50%;
      }

      .name {
        width: 20%;
      }
    }
  }
}

.orderDetailBox {
  h3 {
    margin-bottom: 20px;
  }
}

.statusDialog {
  .el-radio {
    margin-bottom: 10px;
  }

  div {
    margin-bottom: 10px;
  }
}
</style>